<template>
  <canvas :id="id || data" v-if="props.data"></canvas>
</template>
<script setup lang="ts">
import QRCode from 'qrcode';
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: string;//二维码内容
    id?: string;//唯一Id
    size?: number;//大小
  }>(),
  {
    size: 160,
  },
);

watch(() => props.data, (newVal, oldVal) => {
  setEwm()
});
const setEwm = () => {
  const canvas = document.getElementById(`${props.id || props.data}`);
  QRCode.toCanvas(canvas, props.data, {
    width: props.size,  // 二维码的宽度
    height: props.size, // 二维码的高度
    margin: 0,  // 边距，默认是 4
    scale: 4,    // 模块大小，默认是 4
    color: {
      dark: '#000000',  // 二维码的前景色（黑色）
      light: '#ffffff'  // 二维码的背景色（白色）
    },
    errorCorrectionLevel: 'M'  // 错误修正级别：L (低), M (中), Q (较高), H (最高)
  }, function (error: string) {
    if (error) {
      console.error(error);
    } else {
      // console.log("二维码生成成功！");
    }
  });
}
onMounted(() => {
  setEwm()
});
onUnmounted(() => { });
</script>
<style scoped lang="scss"></style>
